<style lang="less">
@import '../vendors/bootstrap/less/bootstrap.less';
@import '../vendors/bootstrap/less/alerts.less';
@import '../less/vue-table.less';
</style>
<template>
	<div>
    <h3>List of Users</h3>
    <vuetable v-ref:vuetable
      api-url="http://vuetable.ratiw.net/api/users"
      pagination-path=""
      :fields="columns"
      :item-actions="itemActions"
      :sort-order="sortOrder"
      :multi-sort="multiSort"
      :append-params="moreParams"
      :per-page="perPage"
      :pagination-info-template="paginationInfoTemplate"
      table-class="table table-bordered table-striped table-hover"
      ascending-icon="glyphicon glyphicon-chevron-up"
      descending-icon="glyphicon glyphicon-chevron-down"
      pagination-class=""
      pagination-info-class=""
      pagination-component-class=""
      wrapper-class="vuetable-wrapper"
      table-wrapper=".vuetable-wrapper"
      loading-class="loading"
      detail-row-id="id"
      detail-row-component="my-detail-row"
      detail-row-transition="expand"
      row-class-callback="rowClassCB">
    </vuetable>
	</div>
</template>

<script>
import DateUtil from '../utils/date-util.js'
export default {
  name: 'DataTablesView',
  data () {
    return {
      columns: [
        {
          name: 'id',
          title: 'ID',
          dataClass: 'text-center',
          callback: 'showDataDetail'
        },
        {
          name: 'name',
          title: '名字',
          sortField: 'name',
          dataClass: 'text-center',
          titleClass: 'text-center'
        },
        {
          name: 'email',
          title: '邮箱'
        },
        {
          name: 'nickname',
          title: '昵称'
        },
        {
          name: 'birthdate',
          title: '生日',
          sortField: 'birthdate',
          callback: 'formatDate|YYYY-MM-DD'
        },
        {
          name: 'gender',
          title: '性别',
          callback: 'gender'
        },
        {
          name: '__actions',
          title: '操作',
          titleClass: 'text-center'
        }
      ],
      itemActions: [
        { name: 'view-item', label: '', icon: 'glyphicon glyphicon-zoom-in', class: 'btn btn-info', extra: {'title': 'View', 'data-toggle': 'tooltip', 'data-placement': 'left'} },
        { name: 'edit-item', label: '', icon: 'glyphicon glyphicon-pencil', class: 'btn btn-warning', extra: {'title': 'Edit', 'data-toggle': 'tooltip', 'data-placement': 'top'} },
        { name: 'delete-item', label: '', icon: 'glyphicon glyphicon-remove', class: 'btn btn-danger', extra: { 'title': 'Delete', 'data-toggle': 'tooltip', 'data-placement': 'right' } }
      ],
      sortOrder: [{
        field: 'name',
        direction: 'asc'
      }],
      multiSort: true,
      perPage: 15,
      paginationInfoTemplate: '当前 {currPage} / {totalPage} 页，显示第{from} 条到第 {to} 条记录，共有 {total} 条记录',
      moreParams: []
    }
  },
  route: {
    data () {
      return {}
    }
  },
  methods: {
    gender (value) {
      return value === 'M'
        ? '<span class="label label-info"><i class="glyphicon glyphicon-star"></i> Male</span>'
        : '<span class="label label-success"><i class="glyphicon glyphicon-heart"></i> Female</span>'
    },
    formatDate (value, fmt) {
      return DateUtil.formatDate(value, fmt)
    },
    showDataDetail (value) {
      let icon = this.$refs.vuetable.isVisibleDetailRow(value) ? 'glyphicon glyphicon-minus-sign' : 'glyphicon glyphicon-plus-sign'
      return [
        '<a class="show-detail-row">',
        '<i class="' + icon + '"></i>',
        '</a>'
      ].join('')
    }
  }
}

</script>

